import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { EditeRequest } from './editor.model';
import { HttpClient } from '@angular/common/http';
import { ConfirmationService } from 'primeng';
import * as _ from 'lodash';
import { DWD_DOWNLOAD_URL } from 'src/app/common-url';

@Component({
  selector: 'app-editor',
  templateUrl: './editor.component.html',
  styleUrls: ['./editor.component.scss']
})
export class EditorComponent implements OnInit {

  public editeForm: FormGroup;
  public typeList: Array<any>; // 类型下来列表
  public typeSelected: any; // 类型选中项
  public articleList: Array<any>; // 文章数组
  @ViewChild('logo') logo: any; // logo对象
  constructor(
    public fb: FormBuilder,
    public http: HttpClient,
    public confirmationService: ConfirmationService,
    public el: ElementRef) {
    this.editeForm = this.fb.group(new EditeRequest());
    this.typeList = [
      { label: '文章', value: 1 },
      { label: '软件', value: 2 }
    ];
    this.typeSelected = this.typeList[0];
    this.articleList = [];
  }

  ngOnInit(): void {
    this.getList();
  }

  public getList() {
    const req = {};
    this.sendPost(DWD_DOWNLOAD_URL.articleTableList, req).subscribe((res: any) => {
      if (!res.status) {
        this.confirmationService.confirm({
          header: '错误提示',
          message: '出现未知异常',
          acceptLabel: '确定',
          rejectLabel: '取消'
        });
      } else {
        this.articleList = res.data;
      }
    });
  }

  public save() {
    const formReq = _.cloneDeep(this.editeForm.value);
    formReq.type = this.typeSelected.value;
    formReq.content = escape(formReq.content);
    formReq.update_content = escape(formReq.update_content);

    const id = formReq.id;
    const req: EditeRequest = formReq;
    const $this = this;
    const fr = new FileReader();
    fr.onload = (event: any) => {
      req.logo = Array.from(new Uint8Array(event.target.result));
      if (id) {
        $this.sendPost(DWD_DOWNLOAD_URL.articleTableUpdate, req).subscribe((res: any) => {
          if (res.status) {
            $this.confirmationService.confirm({
              header: '文件编辑',
              message: '已成功更新【' + req.title + '】',
              acceptLabel: '确定',
              rejectLabel: '取消'
            });
            $this.getList();
          } else {
            $this.confirmationService.confirm({
              header: '文件编辑',
              message: '出现未知异常',
              acceptLabel: '确定',
              rejectLabel: '取消'
            });
          }
        });
      } else {
        $this.sendPost(DWD_DOWNLOAD_URL.articleTableAdd, req).subscribe((res: any) => {
          if (res.status) {
            $this.confirmationService.confirm({
              header: '文件新增',
              message: '已成功新增【' + req.title + '】',
              acceptLabel: '确定',
              rejectLabel: '取消'
            });
            $this.getList();
          } else {
            $this.confirmationService.confirm({
              header: '文件新增',
              message: '出现未知异常',
              acceptLabel: '确定',
              rejectLabel: '取消'
            });
          }
        });
      }
    };
    fr.readAsArrayBuffer(this.logo.nativeElement.files[0]);
  }

  public delete(item) {
    this.confirmationService.confirm({
      header: '文件删除',
      icon: 'pi pi-exclamation-triangle',
      message: '您确定要删除【' + item.title + '】？',
      acceptLabel: '确定',
      rejectLabel: '取消',
      accept: () => {
        const req = {
          id: item.id
        };
        this.sendPost(DWD_DOWNLOAD_URL.articleTableDelete, req).subscribe((res: any) => {
          if (res.status) {
            this.confirmationService.confirm({
              header: '文件删除',
              message: '已成功删除【' + item.title + '】',
              acceptLabel: '确定',
              rejectLabel: '取消'
            });
            this.getList();
          } else {
            this.confirmationService.confirm({
              header: '文件删除',
              message: '出现未知异常',
              acceptLabel: '确定',
              rejectLabel: '取消'
            });
          }
        });
      }
    });

  }

  public sendPost(url, req) {
    return this.http.post(url, req);
  }

  public backfillForm(item, event) {
    this.editeForm = this.fb.group(new EditeRequest(item));
    const elList = this.el.nativeElement.querySelectorAll('li');
    elList.forEach(element => {
      element.classList.remove('active');
    });
    event.currentTarget.classList.add('active');
    this.typeList.some(element => {
      if (element.value === this.editeForm.value.type) {
        this.typeSelected = _.cloneDeep(element);
        return true;
      }
    });
  }

  public resetModule() {
    this.editeForm = this.fb.group(new EditeRequest());
  }
}
